import { Component } from 'react'

export default class DataComp extends Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this)
        this.handleClick = this.handleClick.bind(this)
        this.state = {
            text: ''
        }
    }

    // 手动的监听表单输入
    handleChange(event) {
        // console.log(event.target.value)
        this.setState({
            text: event.target.value
        })
    }

    handleClick() {
        // this.props.parentEvent('我是子组件的信息')
        this.props.parentEvent(this.state.text)
        this.setState({
            text: ''
        })
        // this.$emit('parentEvent', '我是子组件的信息')
    }

    render() {
        return <div>
            <h2>{ this.props.heading } - Prop</h2>

            <hr/>
            <h2>子 -> 父传值</h2>
            <input type="text" value={this.state.text} onChange={this.handleChange} />
            {/*  调用父组件的事件是可以传参数  */}
            <button onClick={this.handleClick}>子 -> 父</button>
        </div>
    }
}


